<template>
    <div class="SystemSet_div">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="jumpBack" >
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>系统设置</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" @click="refresh()"/>
                </div>
            </TitleMenu>
        </div>
        <div id="SystemSet_content" class="content_104class">
            <ul id="SystemSet_ul">
                <li class="SystemSet_li">
                    <a-row class="SystemSet_ul_row">
                        <a-col :span="7" class="SystemSet_li_left" @click="showDialog">
                                服务器设置
                        </a-col>

                        <a-col :span="15" class="SystemSet_li_center">
                            <div class="SystemSet_li_topText" >
                                <input id="server_choose" readonly="readonly" v-model="server_id" v-on:click="open" />
                            </div>

                        </a-col>

                        <a-col :span="2" class="SystemSet_li_right">
                            <div class="SystemSet_li_rightText">
                                <a-icon type="right" />
                            </div>
                        </a-col>
                    </a-row>
                </li>

                <!--<li class="SystemSet_li" @click="$router.push('/lineCount')">
                    <a-row class="SystemSet_ul_row" >
                        <a-col :span="7" class="SystemSet_li_left">
                            线路测量
                        </a-col>

                        <a-col :span="15" class="SystemSet_li_center">
                            <div class="SystemSet_li_topText">
                            </div>

                        </a-col>

                        <a-col :span="2" class="SystemSet_li_right">
                            <div class="SystemSet_li_rightText">
                                <a-icon type="right" />
                            </div>
                        </a-col>
                    </a-row>
                </li>-->

                <li class="SystemSet_li" @click="mapMark()">
                    <a-row class="SystemSet_ul_row">
                        <a-col :span="7" class="SystemSet_li_left">
                            地图标注
                        </a-col>

                        <a-col :span="15" class="SystemSet_li_center">
                            <div class="SystemSet_li_topText">
                            </div>

                        </a-col>

                        <a-col :span="2" class="SystemSet_li_right">
                            <div class="SystemSet_li_rightText">
                                <a-icon type="right" />
                            </div>
                        </a-col>
                    </a-row>
                </li>

                <li class="SystemSet_li" @click="checkMyVersion()">
                    <a-row class="SystemSet_ul_row">
                        <a-col :span="7" class="SystemSet_li_left">
                            版本检查
                        </a-col>

                        <a-col :span="15" class="SystemSet_li_center">
                            <div class="SystemSet_li_topText">
                            </div>

                        </a-col>

                        <a-col :span="2" class="SystemSet_li_right">
                            <div class="SystemSet_li_rightText">
                                <a-icon type="right" />
                            </div>
                        </a-col>
                    </a-row>
                </li>

                <li class="SystemSet_li" @click="aboutSoft" >
                    <a-row class="SystemSet_ul_row">
                        <a-col :span="7" class="SystemSet_li_left">
                            关于软件
                        </a-col>

                        <a-col :span="15" class="SystemSet_li_center">
                            <div class="SystemSet_li_topText">
                            </div>

                        </a-col>

                        <a-col :span="2" class="SystemSet_li_right">
                            <div class="SystemSet_li_rightText">
                                <a-icon type="right" />
                            </div>
                        </a-col>
                    </a-row>
                </li>
            </ul>
        </div>
        <FooterChaanel v-if="isShowFooter===true"></FooterChaanel>
    </div>
</template>
<style>

    #SystemSet_content{
        font-family: PingFangSC-Semibold;
    }
    #SystemSet_ul{
        padding: 1vw 2vw 10vw 2vw;
        margin: 0;

    }
    .SystemSet_li  {
        width: 96vw;
        height: 16vw;
        margin:0 ;
        float: left;
        list-style: none;
    }
    .SystemSet_ul_row{
        width: 96vw;
        height: 16vw;
        border-bottom: 0.2vw solid lightgray;
    }
    .SystemSet_li_left{
        font-size: 5.5vw;
        height: 16vw;
        line-height: 16vw;
        font-family: "SimHei";
        color: black;
    }
    .SystemSet_li_center{
        height: 16vw;
        text-align: right;
    }
    .SystemSet_li_topText{
        height: 16vw;
        line-height: 16vw;
        font-family: "Microsoft YaHei";
        font-size: 5vw;
        color: grey;
        padding-bottom: 2vw;
    }
    .SystemSet_li_right{
        height: 16vw;
        line-height: 16vw;
        text-align: left;
        font-size: 4vw;
        font-family: "Microsoft YaHei";
        color: gray;
        padding: 0 2vw 0 0vw;
        width: 8vw;
    }
    #server_choose{
        border:0.5px solid lightgray;
        width: 60vw;
        height: 12vw;
        padding: 0 0 0 2vw;
        margin:0.2vw 0.2vw 0.2vw 0.2vw ;
        background: lightgray;
        border-radius: 2vw;
        font-size: 5vw;

    }
    /*弹框信息框的样式*/
    .setHostClass{
        width:80vw;
        font-family: "Microsoft Yahei", serif;

    }
    .setHostClass>.el-message-box__header>.el-message-box__title{
        font-size: 6vw;
        margin:2vw 0 0 0;
        height: 6vw;
        line-height: 6vw;
        text-align: center;
        font-weight: bold;
    }
    /*.el-message-box__content{
        width: 80vw;
        height: 10vw;
    }*/
    .setHostClass>.el-message-box__content>.el-message-box__message{
        font-size: 4vw;
        height: 6vw;
        line-height: 6vw;
        text-align: center;
    }
    .setHostClass>.el-message-box__content>.el-message-box__message>p{
        font-size: 5vw;
        height: 6vw;
        line-height: 6vw;
        text-align: center;
    }
    /*.el-message-box__input{
        margin: 0;
    }*/
    .setHostClass>.el-message-box__header>.el-message-box__headerbtn>.el-message-box__close{
        font-size: 10vw;
    }
    .setHostClass>.el-message-box__content>.el-message-box__input>.el-input>.el-input__inner{
        border-bottom: 0.5vw solid deepskyblue;
        border-top:none;
        border-left:none;
        border-right: none;
        height: 12vw;
        font-size: 5vw;
        font-family: "Microsoft Yahei", serif;
        border-radius: 0;
        padding: 0;
    }
    .setHostClass>.el-message-box__btns{
        width: 80vw;
        height: 12vw;
        line-height: 12vw;
        margin: 0  ;
        padding: 0;
    }
    .setHostClass>.el-message-box__btns button:first-child {
        font-size: 6vw;
        width: 20vw;
        float: left;
        margin-left: 10vw;
        border-radius: 1vw;
        background-color:transparent;
        color: black;
        border:0;
    }
    .setHostClass>.el-message-box__btns button:last-child {
        font-size: 6vw;
        width: 20vw;
        float: right;
        border-radius: 1vw;
        margin-right: 10vw;
        background-color:transparent;
        color: deepskyblue;
        border:0;
    }
    /*成功消息框提示*/
    .el-message{
        min-width:40vw ;
        height: 10vw;
        margin-top: 12vw;
        border-radius: 1vw;
        border: 0;
    }
    .el-message__content{
        font-size: 5vw;
        width: 40vw;
        text-align: center;
    }
    .el-message{
        min-width: 60vw ;
    }
</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    import axios from "axios"
    export default {
        name: "SystemSet",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        data() {
            return {
                msg: 'hello vue',
                server_id:this.$store.state.host,
                isShowFooter:true,
            }
        },
        mounted(){
            window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
            window.addEventListener('native.keyboardhide', this.keyboardHideHandler);
        },
        methods:{
            open() {
                let me = this;
                this.$prompt('请输入服务器IP', '服务器设置', {
                    customClass:'setHostClass',
                    closeOnClickModal:false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue:this.server_id,
                    /*inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputErrorMessage: '邮箱格式不正确'*/
                }).then(({ value }) => {
                    axios({
                        method:'get',
                        /*url:value+'/app/auth/hello',*/
                        url:'http://'+value+'/app/auth/hello',
                        headers:{
                            Authorization:localStorage.getItem("userToken")
                        }
                    }).then((response)=>{
                        if(response.status === 200){
                            this.server_id = value;
                            this.$store.commit('updateHost',value);
                            if(typeof cordova !== "undefined"){
                                this.$toast("服务器地址设置成功","short","bottom",-100);
                            }else {
                                console.log("服务器地址设置成功");
                            }
                            /*this.$message({
                                type: 'success',
                                message: '服务器地址设置成功 '

                            });*/
                        }
                        else{
                            if(typeof cordova !== "undefined"){
                                this.$toast("设置失败，返回其他状态码","short","bottom",-100);
                            }else {
                                console.log("服务器地址未正确");
                            }
                            /*console.log("设置失败，返回其他状态码");
                            this.$message({
                                type: 'info',
                                message: '服务器地址未正确 ',
                            });*/
                        }
                    }).catch((error)=> {
                        if(typeof cordova !== "undefined"){
                            this.$toast("服务器地址设置失败","short","bottom",-100);
                        }else {
                            console.log("服务器地址设置失败"+error);
                        }
                        /*console.log("服务器地址设置失败"+error);
                        this.$message({
                            type: 'info',
                            message: '服务器地址设置失败 '
                        });*/
                    });

                }).catch(() => {
                    if(typeof cordova !== "undefined"){
                        this.$toast("取消输入","short","bottom",-100);
                    }else {
                        console.log("服务器设置取消输入");
                    }
                    /*this.$message({
                        type: 'info',
                        message: '取消输入',

                    });*/
                });
            },
            showDialog(){
                    var message = "Am I Prompt Dialog?";
                    var title = "PROMPT";
                    var buttonLabels = ["YES","NO"];
                    var defaultText = "Default"
                    navigator.notification.prompt(message, promptCallback, title, buttonLabels, defaultText);
                    function promptCallback(result) {
                        console.log("You clicked " + result.buttonIndex + " button! \n" +
                            "You entered " +  result.input1);
                    }
                    },
            keyboardShowHandler(e){
                /*console.log(e.keyboardHeight);*/
                this.isShowFooter = false;

            },
            keyboardHideHandler(e){
                this.isShowFooter = true;
            },
            jumpBack(){
                this.clickButton();
                this.$router.push("/homeWork");
            },
            refresh(){
              this.clickButton();
            },
            mapMark(){
                this.clickButton();
                this.$router.push('/mapMark');
            },
            checkMyVersion(){
                this.clickButton();
                this.$router.push('/versionCheck');
            },
            aboutSoft(){
                this.clickButton();
                this.$router.push('/aboutSoft');
            }

        }
    }
</script>

